Skip to content

feat(FR-2827): make deployment tags clickable to filter the list#7274

Merged
graphite-app[bot] merged 1 commit into
mainfrom
05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list
May 7, 2026
Merged

feat(FR-2827): make deployment tags clickable to filter the list#7274
graphite-app[bot] merged 1 commit into
mainfrom
05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list

Conversation

@yomybaby
Copy link
Copy Markdown
Member

@yomybaby yomybaby commented May 7, 2026

Resolves #7273(FR-2827)

Stacked on #7272.

Summary

Deployment tags shown in the deployment list table and the detail Overview card are now interactive. Activating a tag (mouse click or keyboard Enter/Space) navigates to the deployment list with that tag pre-applied as a filter, so a tag becomes a one-click pivot to "find all deployments tagged X."

The URL shape uses the existing iContains filter that the list page already understands:

/deployments?filter={"tags":{"iContains":"<tag>"}}

(URI-encoded in the actual link.) Activating a chip from the admin context routes to /admin-deployments instead so users stay within the admin list.

Changes

  • react/src/components/DeploymentTagChips.tsx (new) — fragment-based component (DeploymentTagChips_metadata on ModelDeploymentMetadata) that renders all tag chips for a deployment. Wraps antd <Tag> with role="button", tabIndex={0}, and Enter/Space onKeyDown. Owns the filter-URL contract inline (buildDeploymentTagFilterUrl) and uses useLocation() to keep admin-context activations on /admin-deployments. stopRowClick prop opts into e.stopPropagation() for use inside the table row; fallback prop renders when there are no tags.
  • react/src/components/DeploymentList.tsx — replaces the inline tag rendering with <DeploymentTagChips metadataFrgmt={row.metadata} stopRowClick fallback={…} />. Filter prop changed from string to GraphQLFilter object so callers no longer JSON-stringify.
  • react/src/components/DeploymentConfigurationSection.tsx — replaces the inline tag rendering in the Overview "Tags" descriptions item with <DeploymentTagChips metadataFrgmt={deployment?.metadata ?? null} fallback={renderFallback()} />. Spreads DeploymentTagChips_metadata in the page query.
  • react/src/pages/DeploymentListPage.tsx and react/src/pages/AdminDeploymentListPage.tsx — read filter as a GraphQLFilter object via nuqs parseAsJson, with a guard that falls back to {} for non-object payloads (null/array/primitive). Removes the page-local parseFilter* helpers.
  • packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx — derive conditions from value instead of holding it in useState. Reassigns sequential ids (cond-${i}) on derive so React keys stay stable; the previous random-id-per-call approach would have unmounted every Tag on every render once conditions was no longer a state. This is the bug surfaced when an external prop change (URL-driven query state) updated value but the rendered tags stayed on the stale state.

Verification

  • bash scripts/verify.sh: Relay PASS, Lint PASS, Format PASS. Two pre-existing TypeScript failures (packages/backend.ai-client/src/client.ts implicit-any errors and react/src/components/DeleteForeverVFolderModalV2.tsx missing-options error) reproduce on the parent branch (PR fix(FR-2826): polish deployment revision UX (terminology, env block, start command, applying-state polling) #7272) without these changes — they are unrelated.
  • Manual: clicking and Enter/Space-activating a tag in both the list and the detail page navigate to the filtered list URL, the table reloads with only matching deployments, and the rendered filter tags reflect the URL value across re-renders. Activating a tag from /admin-deployments stays within the admin list.

Notes

  • No backend changes — the { tags: { iContains: ... } } filter shape is already handled by the list pages.
  • Detail-side splits comma-joined tag strings before render (preserved behavior); each individual tag becomes its own clickable chip.
  • The chip currently replaces the entire filter query param when activated. This matches the issue's "filter applied" requirement; merging with an already-applied filter is left as a future polish.

Copy link
Copy Markdown
Member Author

yomybaby commented May 7, 2026


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • flow:merge-queue - adds this PR to the back of the merge queue
  • flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

Coverage Report for react-coverage (./react)

Status Category Percentage Covered / Total
🔵 Lines 6.52% 1783 / 27318
🔵 Statements 5.39% 1978 / 36640
🔵 Functions 5.2% 296 / 5690
🔵 Branches 3.79% 1293 / 34112
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
react/src/components/DeploymentConfigurationSection.tsx 0% 0% 0% 0% 54-343
react/src/components/DeploymentList.tsx 0% 0% 0% 0% 50-387
react/src/components/DeploymentTagChips.tsx 0% 0% 0% 0% 31-53
react/src/pages/AdminDeploymentListPage.tsx 0% 0% 0% 0% 44-64
react/src/pages/DeploymentListPage.tsx 0% 0% 0% 0% 38-58
Generated in workflow #417 for commit 4276682 by the Vitest Coverage Report Action

@yomybaby yomybaby force-pushed the 05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list branch from aac7cf4 to d10bb0c Compare May 7, 2026 03:33
@yomybaby yomybaby changed the base branch from 05-07-feat_fr-2826-followup_deployment_revisions_polish to graphite-base/7274 May 7, 2026 04:08
@yomybaby yomybaby force-pushed the graphite-base/7274 branch from 8df2e14 to 731574c Compare May 7, 2026 06:18
@yomybaby yomybaby force-pushed the 05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list branch from d10bb0c to 3438fb6 Compare May 7, 2026 06:18
@yomybaby yomybaby changed the base branch from graphite-base/7274 to main May 7, 2026 06:18
@github-actions github-actions Bot added deployment frontend UX size:L 100~500 LoC and removed size:M 30~100 LoC labels May 7, 2026
@yomybaby yomybaby marked this pull request as ready for review May 7, 2026 06:18
Copilot AI review requested due to automatic review settings May 7, 2026 06:18
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Status Category Percentage Covered / Total
🔵 Lines 8.64% 361 / 4177
🔵 Statements 7.78% 410 / 5264
🔵 Functions 9.21% 94 / 1020
🔵 Branches 7% 362 / 5171
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx 0% 0% 0% 0% 188-770
Generated in workflow #417 for commit 4276682 by the Vitest Coverage Report Action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Status Category Percentage Covered / Total
🔵 Lines 8.64% 361 / 4177
🔵 Statements 7.78% 410 / 5264
🔵 Functions 9.21% 94 / 1020
🔵 Branches 7% 362 / 5171
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx 0% 0% 0% 0% 188-770
Generated in workflow #411 for commit 3438fb6 by the Vitest Coverage Report Action

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Makes deployment tags interactive across the deployments surface so users can navigate to the deployment list with a tag filter pre-applied via the existing JSON filter query parameter.

Changes:

  • Switch deployments list pages to treat filter as a JSON query param (via nuqs parseAsJson) and plumb a structured GraphQLFilter into DeploymentList.
  • Introduce DeploymentTagChips and use it to render clickable tags in the deployments list table and the deployment detail overview.
  • Adjust BAIGraphQLPropertyFilter condition ID stability to avoid remount churn.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
react/src/pages/DeploymentListPage.tsx Parses filter from the URL as JSON and passes a structured filter into the list + query variables.
react/src/pages/AdminDeploymentListPage.tsx Same JSON-based filter query-param handling for the admin deployments list page.
react/src/components/DeploymentTagChips.tsx New clickable/tag-chip renderer that navigates to the deployments list with a tag filter applied.
react/src/components/DeploymentList.tsx Replaces inline tag rendering with DeploymentTagChips and changes filter prop types to GraphQLFilter.
react/src/components/DeploymentConfigurationSection.tsx Uses DeploymentTagChips for the Overview “Tags” item and updates fragment selections accordingly.
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx Updates condition derivation / IDs to stabilize rendered tags across renders.

Comment thread react/src/pages/DeploymentListPage.tsx Outdated
Comment thread react/src/pages/AdminDeploymentListPage.tsx Outdated
Comment thread react/src/components/DeploymentTagChips.tsx Outdated
Comment thread react/src/components/DeploymentTagChips.tsx
@yomybaby yomybaby force-pushed the 05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list branch from 3438fb6 to bf47789 Compare May 7, 2026 06:29
Copy link
Copy Markdown
Contributor

@agatha197 agatha197 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@graphite-app
Copy link
Copy Markdown

graphite-app Bot commented May 7, 2026

Merge activity

Resolves #7273(FR-2827)

Stacked on #7272.

## Summary

Deployment tags shown in the deployment list table and the detail Overview card are now interactive. Activating a tag (mouse click or keyboard Enter/Space) navigates to the deployment list with that tag pre-applied as a filter, so a tag becomes a one-click pivot to "find all deployments tagged X."

The URL shape uses the existing `iContains` filter that the list page already understands:

```
/deployments?filter={"tags":{"iContains":"<tag>"}}
```

(URI-encoded in the actual link.) Activating a chip from the admin context routes to `/admin-deployments` instead so users stay within the admin list.

## Changes

- `react/src/components/DeploymentTagChips.tsx` *(new)* — fragment-based component (`DeploymentTagChips_metadata` on `ModelDeploymentMetadata`) that renders all tag chips for a deployment. Wraps antd `<Tag>` with `role="button"`, `tabIndex={0}`, and Enter/Space `onKeyDown`. Owns the filter-URL contract inline (`buildDeploymentTagFilterUrl`) and uses `useLocation()` to keep admin-context activations on `/admin-deployments`. `stopRowClick` prop opts into `e.stopPropagation()` for use inside the table row; `fallback` prop renders when there are no tags.
- `react/src/components/DeploymentList.tsx` — replaces the inline tag rendering with `<DeploymentTagChips metadataFrgmt={row.metadata} stopRowClick fallback={…} />`. Filter prop changed from `string` to `GraphQLFilter` object so callers no longer JSON-stringify.
- `react/src/components/DeploymentConfigurationSection.tsx` — replaces the inline tag rendering in the Overview "Tags" descriptions item with `<DeploymentTagChips metadataFrgmt={deployment?.metadata ?? null} fallback={renderFallback()} />`. Spreads `DeploymentTagChips_metadata` in the page query.
- `react/src/pages/DeploymentListPage.tsx` and `react/src/pages/AdminDeploymentListPage.tsx` — read `filter` as a `GraphQLFilter` object via `nuqs` `parseAsJson`, with a guard that falls back to `{}` for non-object payloads (null/array/primitive). Removes the page-local `parseFilter*` helpers.
- `packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx` — derive `conditions` from `value` instead of holding it in `useState`. Reassigns sequential ids (`cond-${i}`) on derive so React keys stay stable; the previous random-id-per-call approach would have unmounted every Tag on every render once `conditions` was no longer a state. This is the bug surfaced when an external prop change (URL-driven query state) updated `value` but the rendered tags stayed on the stale state.

## Verification

- `bash scripts/verify.sh`: Relay PASS, Lint PASS, Format PASS. Two pre-existing TypeScript failures (`packages/backend.ai-client/src/client.ts` implicit-any errors and `react/src/components/DeleteForeverVFolderModalV2.tsx` missing-`options` error) reproduce on the parent branch (PR #7272) without these changes — they are unrelated.
- Manual: clicking and Enter/Space-activating a tag in both the list and the detail page navigate to the filtered list URL, the table reloads with only matching deployments, and the rendered filter tags reflect the URL value across re-renders. Activating a tag from `/admin-deployments` stays within the admin list.

## Notes

- No backend changes — the `{ tags: { iContains: ... } }` filter shape is already handled by the list pages.
- Detail-side splits comma-joined tag strings before render (preserved behavior); each individual tag becomes its own clickable chip.
- The chip currently replaces the entire `filter` query param when activated. This matches the issue's "filter applied" requirement; merging with an already-applied filter is left as a future polish.
@graphite-app graphite-app Bot force-pushed the 05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list branch from bf47789 to 4276682 Compare May 7, 2026 06:59
@graphite-app graphite-app Bot merged commit 4276682 into main May 7, 2026
12 checks passed
@graphite-app graphite-app Bot deleted the 05-07-feat_fr-2827_make_deployment_tags_clickable_to_filter_list branch May 7, 2026 07:01
@github-pages github-pages Bot temporarily deployed to github-pages May 7, 2026 07:02 Inactive
agatha197 pushed a commit that referenced this pull request May 18, 2026
Part of the recent main-branch docs catch-up plan (Work Item 11).

New page documenting the Deployment Preset feature introduced over Q1–Q2 2026:

- FR-2750 (#7091) feature spec
- FR-2761 (#7125) admin create / edit / delete UI
- FR-2762 (#7127) preset detail view in VFolderDeployModal
- FR-2801 (#7224) pre-populate launcher fields from preset
- FR-2805 (#7233) URLSearchParams in preset navigation
- FR-2827 (#7274) clickable deployment tags filter the list
- FR-2810 (#7242) batch image canonical names on admin preset list
- FR-2773 (#7153) preserve auto-selected resourcePresetId

New sections:
1. What is a Deployment Preset?
2. (Admin) Manage Deployment Presets — list, filter, create, edit, delete (typed-confirm)
3. Using a Preset when Deploying a Model — preset detail, auto/manual deploy paths
4. Pre-populated Launcher Fields
5. Filtering by Tags

Also adds book.config.yaml navigation entries under the Model Serving category in all 4 languages.

Updated in all 4 languages (en/ko/ja/th). Screenshots flagged with TODO markers for separate capture. Linked from model_serving.md (PR B) so PR B's cross-references now resolve.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make deployment tags clickable to filter the deployment list

3 participants